<template>
  <div v-loading="loading" class="departments">
    <section class="info-container">
      <el-descriptions class="descriptions-list" size="large" border>
        <template #title>
          <div class="descriptions-title">
            <el-icon class="descriptions-title-icon">
              <HelpFilled />
            </el-icon>
            <span>部门</span>
          </div>
        </template>
      </el-descriptions>
      <el-container class="tech-container">
        <div v-for="item in departList" :key="item.id" class="tech-wrapper">
          <router-link :to="`/department/${item.id}`">
            <el-card class="tech" shadow="hover" :body-style="style.cardBody">
              <div class="tech-head">
                <el-icon>
                  <Stamp />
                </el-icon>
              </div>
              <div class="tech-body">
                <div class="tech-name">{{ item.name }}</div>
              </div>
              <div class="tech-foot">
                <div class="tech-id">No.{{ item.id }}</div>
              </div>
            </el-card>
          </router-link>
        </div>
        <div v-if="CreateDepartmentPermissions" class="tech-wrapper">
          <el-card class="tech create-tech" shadow="hover" :body-style="style.cardBody" @click="toggleAddDepartment">
            <div class="create-tech-logo">
              <el-icon class="create-tech-icon">
                <Plus />
              </el-icon>
            </div>
            <div class="create-tech-text">
              <div>创建部门</div>
            </div>
          </el-card>
        </div>
      </el-container>
    </section>
    <el-dialog v-model="dialogVisible" title="创建部门" width="30%">
      <el-form ref="form" :model="form" label-width="auto" :rules="rules">
        <el-form-item label="部门名称" prop="departmentName">
          <el-input v-model="form.departmentName"></el-input>
        </el-form-item>
        <el-form-item label="组长" prop="leaderId">
          <el-select v-model="form.leaderId">
            <el-option v-for="user in users" :key="user.id" :label="user.name" :value="user.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="toggleAddDepartment">Cancel</el-button>
          <el-button type="primary" @click="submitForm">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <!-- <Loading :isLoading="loading" /> -->
</template>

<script>
import { post } from '../../utils/common/api'
export default {
  data() {
    return {
      uid: this.usePermission.id,
      dialogVisible: false,
      departList: [
        // {
        //   id: 1,
        //   name: '前端组'
        // },
        // {
        //   id: 2,
        //   name: '后端组'
        // },
        // {
        //   id: 3,
        //   name: '移动端组'
        // },
      ],

      style: {
        cardBody: {
          'display': 'flex',
          'flex-direction': 'column',
          'width': '100%',
          'height': '100%',
          'box-sizing': 'border-box'
        }
      },

      loading: false,

      users: [],

      form: {
        departmentName: '',

        leaderId: undefined,
      },

      rules: {
        departmentName:
          [
            { required: true, message: 'Please input department name', trigger: 'blur' },
          ],
        leaderId:
          [
            {
              required: true,
              message: 'Please select department leader',
              trigger: 'change',
            },
          ]
      }

    }
  },
  computed: {
    CreateDepartmentPermissions() {
      return this.usePermission.systemPermission.includes(1) || this.usePermission.systemPermission.includes(13)
    }
  },
  watch: {
    dialogVisible(newValue, oldValue) {
      if (oldValue === true && newValue === false) {
        // Reset form data when dialogVisible changes from true to false
        this.form.departmentName = '';
        this.form.leaderId = undefined;
      }
    },
  },
  methods: {
    async getAllDepartment() {
      const res = await post('/department/all', {})
      this.departList = res.list
    },

    async getAllUsersList() {
      const res = await post('/user/all', {})
      this.users = res.list
    },

    async loadData() {
      this.loading = true;
      await Promise.all([
        this.getAllDepartment(),
        this.getAllUsersList()
      ])
      this.loading = false;
    },

    toggleAddDepartment() {
      this.dialogVisible = !this.dialogVisible
    },

    async createDepartment() {
      const res = await post('/department/create', {
        name: this.form.departmentName,
        uid: this.form.leaderId
      })
      ElNotification({
        title: '部门创建成功',
        message: `您刚刚创建了 ${res.name} 部门。`,
        type: 'success',
        position: 'bottom-right',
      })
      this.getAllDepartment()
      this.dialogVisible = false
    },

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.createDepartment()
        } else {
          alert('请提供完整的表单信息!!');
          return false;
        }
      });
    },
  },
  
  mounted() {
    this.loadData()
  },
}
</script>

<style scoped>
.info-container {
  padding: 20px 0;
}

.descriptions-list {
  width: 100%;
}

.descriptions-title {
  display: flex;
  align-items: center;
}

.descriptions-title-icon {
  margin-right: 8px;
}

.tech-container {
  flex-wrap: wrap;
}

.tech-wrapper {
  padding: 10px;
  width: 240px;
  height: 160px;
}

.tech {
  cursor: pointer;
  user-select: none;
  width: 100%;
  height: 100%;
  text-align: left;
}

.tech-el-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.tech-head {
  height: 25px;
}

.tech-body {
  flex-grow: 1;
  padding: 8px 0;
}

.tech-foot {
  height: 25px;
}

.tech-name {
  font-size: 18px;
  font-weight: 600;
}

.tech-id {
  font-size: 14px;
  color: #777777;
}

.create-tech {
  text-align: center;
}

.create-tech-logo {
  height: 60%;
}

.create-tech-icon {
  height: 100%;
  font-size: 24px;
}

.create-tech-text {
  height: 40%;
  font-size: 15px;
}
</style>